<template>
  <div class="">
    <div>
      <div class="w-100 ib">parent</div>
      <el-select v-model="pvalue" @change="getParent" placeholder="parent data">
        <el-option
          v-for="item in parentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    
    <Daughter />
    <Son />
  </div>
</template>
 
<script>
import Son from './son'
import Daughter from './daughter'
export default {
  name: '',
  components: { Daughter, Son },
  data () {
    return {
      parentOptions: [
        {value: '选项1', label: 'label1'},
        {value: '选项2', label: 'label2'},
        {value: '选项3', label: 'label3'}
      ],
      pvalue: '选项2'
    }
  },
  methods: {
    getParent(v) {
      this.$bus.$emit('getParent', v)
    }
  },
  mounted() {
    //父组建使用： this.bus.$on("自定义事件名", msg => {})
    this.$bus.$on('getSon', v => {
      // console.log('p', v) // output twice
      this.pvalue = v
    })
  },
  watch: {
    // 父组件监听value 从son拿值 再次emit传给daughter
    pvalue(n, o) {
      // console.log(n, o)
      if(o != n) {
        this.$bus.$emit('getParent', n)
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
 
</style>